<template>
  <div class="details">
    <a-spin :spinning="loading">
      <div class="base-info">
        <a-form :model="formState" autocomplete="off">
          <div class="title">
            <div>
              <span style="margin-right: 16px">运单号: {{ formState.bizPreOrderShipmentResDto.waybillNum }}</span>
              <a-tag v-if="passData.state === 1" color="#f50"> 不可报价 </a-tag>
              <a-tag v-if="passData.state === 2" color="#2db7f5"> 待报价 </a-tag>
              <a-tag v-if="passData.state === 3" color="#2db7f5"> 待审核 </a-tag>
              <a-tag v-if="passData.state === 4" color="#f40"> 审批驳回 </a-tag>
              <a-tag v-if="passData.state === 5" color="#87d068"> 审批通过 </a-tag>
            </div>

            <div class="refuse-info">
              <span :title="formState.bizOrderShipmentQuotation.adjustReason">调价理由: {{ formState.bizOrderShipmentQuotation.adjustReason }}</span>
            </div>
          </div>
          <a-row :gutter="8">
            <a-col v-for="(item, index) in formItemColumn" :key="index" :span="8">
              <a-form-item
                :class="[['waybillNum', 'pickupCity', 'addressType'].includes(item.name) ? 'emphasis-item' : '']"
                v-bind="item"
                :label-col="{ style: 'width:110px' }"
                :wrapper-col="{ style: 'calc(100% - 110px)' }"
              >
                <template v-if="item.name === 'addressType'">
                  {{ getLabelByDict("WAYBILL_TYPE", formState.bizPreOrderShipmentResDto[item.name]) }}
                </template>
                <template v-else-if="item.name === 'purchaseInsurance'">
                  <span v-if="formState.bizPreOrderShipmentResDto.purchaseInsurance === 1">购买保险</span>
                  <span v-if="formState.bizPreOrderShipmentResDto.purchaseInsurance === 0">未购买保险</span>
                </template>
                <template v-else-if="item.name === 'customsDeclarationTitle'">
                  {{ formState.bizPreOrderShipmentResDto[item.name] }}
                </template>
                <template v-else-if="item.name === 'squaresNumber'">
                  {{ formState.bizPreOrderShipmentResDto[item.name] }}
                </template>
                <template v-else-if="item.name === 'volumeWeight'">
                  {{ formState.bizPreOrderShipmentResDto[item.name] }}
                </template>
                <template v-else-if="item.name === 'makeInvoiceStatus'">
                  <a-button type="link" @click="showInvoiceHandle">查看发票</a-button>
                </template>
                <template v-else-if="item.name === 'shippingMethod'">
                  <span v-if="formState.bizPreOrderShipmentResDto.shippingMethod === 0">上门取件</span>
                  <span v-if="formState.bizPreOrderShipmentResDto.shippingMethod === 1">自送入仓</span>
                </template>
                <template v-else-if="item.name === 'remark'">
                  <span :title="formState.bizPreOrderShipmentResDto.remark">{{ formState.bizPreOrderShipmentResDto.remark }}</span>
                  <a-button type="link" @click="modifyRemarkHandle">修改</a-button>
                </template>
                <template v-else-if="item.name === 'innerRemark'">
                  <span :title="formState.bizPreOrderShipmentResDto.innerRemark">{{ formState.bizPreOrderShipmentResDto.innerRemark }}</span>
                  <a-button type="link" @click="modifyInnerRemarkHandle">修改</a-button>
                </template>
                <template v-else-if="item.name === 'depositTime'">
                  <span v-if="!formState.bizPreOrderShipmentResDto.depositTime">-</span>
                  <span v-else>{{ dayjs(Number(formState.bizPreOrderShipmentResDto.depositTime)).format("YYYY-MM-DD HH:mm:ss") }}</span>
                </template>
                <template v-else>{{ formState.bizPreOrderShipmentResDto[item.name] }}</template>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- 报价合计 -->
      <div class="total-quotation">
        <div class="title">报价合计</div>
        <div class="quotation-item">
          标准运费: <span class="emphasis-item">{{ formState.totalNormFreightPriceStr }}</span>
        </div>
        <div class="quotation-item">
          调整运费: <span class="emphasis-item">{{ formState.totalAdjustPriceStr }}</span>
        </div>
        <div class="quotation-item">
          结算费用总计: <span class="emphasis-item">{{ formState.totalPriceStr }}</span>
        </div>
      </div>

      <!-- 基础结算单价 -->
      <div class="unit-price-update">
        <div class="title">
          <span>基础运费</span>
          <span
            >合计：<span class="emphasis-item">{{ formState.freightCost.totalPrice || 0 }}</span></span
          >
        </div>
        <vxe-table border show-overflow="title" height="250" :data="formState.freightCost.list" :scroll-y="{ enabled: true, gt: 30 }">
          <vxe-column field="costName" title="费用名称" min-width="140" fixed="left"></vxe-column>
          <vxe-column field="unitPrice" title="标准单价" min-width="120"></vxe-column>
          <vxe-column field="adjustUnitPrice" title="调整单价" min-width="120"> </vxe-column>
          <vxe-column field="clearingUnitPrice" title="基础单价" min-width="120"></vxe-column>
          <vxe-column field="number" title="数量" min-width="90">
            <template #default="{ row }"> {{ row.number }} {{ row.unit }} </template>
          </vxe-column>
          <vxe-column field="totalPrice" title="金额" min-width="120"></vxe-column>
          <vxe-column field="createTime" title="添加时间" min-width="180">
            <template #default="{ row }">
              {{ dayjs(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </vxe-column>
          <vxe-column field="createName" title="添加人" min-width="90" fixed="right"> </vxe-column>
        </vxe-table>
      </div>
      <!-- 附加费明细 -->
      <div class="additional-charge">
        <div class="title">
          <span>附加费</span>
          <span
            >合计：<span class="emphasis-item">{{ formState.appendCost.totalPrice || 0 }}</span></span
          >
        </div>
        <vxe-table border show-overflow="title" height="250" :data="formState.appendCost.list" :scroll-y="{ enabled: true, gt: 30 }">
          <vxe-column field="costName" title="费用名称" min-width="140"></vxe-column>
          <vxe-column field="unitPrice" title="单价"></vxe-column>
          <vxe-column field="number" title="数量">
            <template #default="{ row }"> {{ row.number }} {{ row.unit }} </template>
          </vxe-column>
          <vxe-column field="totalPrice" title="金额"></vxe-column>
          <vxe-column field="createTime" title="添加时间">
            <template #default="{ row }">
              {{ dayjs(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </vxe-column>
          <vxe-column field="createName" title="添加人"> </vxe-column>
          <vxe-column field="approvalState" title="审核状态">
            <template #default="{ row }">
              <a-tag v-if="row.approvalState == 0" color="#2db7f5"> 待审批 </a-tag>
              <a-tag v-if="row.approvalState === 2" color="#ccc"> 撤回 </a-tag>
              <a-tag v-if="row.approvalState === 1" color="#f40"> 审批驳回 </a-tag>
              <a-tag v-if="row.approvalState === 3" color="#87d068"> 审批通过 </a-tag>
            </template>
          </vxe-column>
          <vxe-column field="action" title="操作">
            <template #default="{ row }">
              <a-button type="link" @click="editChargeHandle(row)">编辑</a-button>
              <a-button type="link" danger @click="deleteChargeCostHandle(row)">删除</a-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <!-- 费用追加 -->
      <div class="total-quotation">
        <div class="title">
          <div>
            <span>追加费用</span>
            <a-button style="margin-left: 8px" size="small" @click="addChargeHandle">追加</a-button>
          </div>
          <span>
            合计：<span class="emphasis-item">{{ formState.addCost.totalPrice || 0 }}</span>
          </span>
        </div>
        <vxe-table border show-overflow="title" height="250" :data="formState.addCost.list" :scroll-y="{ enabled: true, gt: 30 }">
          <vxe-column field="costName" title="费用名称" min-width="140"></vxe-column>
          <vxe-column field="unitPrice" title="单价"></vxe-column>
          <vxe-column field="number" title="数量">
            <template #default="{ row }"> {{ row.number }} {{ row.unit }} </template>
          </vxe-column>
          <vxe-column field="totalPrice" title="金额"></vxe-column>
          <vxe-column field="remark" title="追加原因"></vxe-column>
          <vxe-column field="createTime" title="添加时间" min-width="135">
            <template #default="{ row }">
              {{ dayjs(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </vxe-column>
          <vxe-column field="createName" title="添加人"> </vxe-column>
          <vxe-column field="approvalState" title="审核状态">
            <template #default="{ row }">
              <a-tag v-if="row.approvalState == 0" color="#2db7f5"> 待审批 </a-tag>
              <a-tag v-if="row.approvalState === 2" color="#ccc"> 撤回 </a-tag>
              <a-tag v-if="row.approvalState === 1" color="#f40"> 审批驳回 </a-tag>
              <a-tag v-if="row.approvalState === 3" color="#87d068"> 审批通过 </a-tag>
            </template>
          </vxe-column>
        </vxe-table>
        <div class="total-quotation-footer">
          总价合计：<span class="emphasis-item">{{ formState.sumTotalPrice || 0 }}</span>
        </div>
      </div>
    </a-spin>
    <!-- 操作按钮 -->
    <div class="operation-btn">
      <a-button style="margin-right: 8px" v-if="type === 2" type="danger" @click="rejectHandle">驳回报价</a-button>
      <a-button style="margin-right: 8px" v-if="type === 2" type="primary" @click="resolveHandle">通过并审批下一个</a-button>
      <a-button @click="emit('update:visible', false)">关闭</a-button>
    </div>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component
        v-model:visible="dialogOpts.visible"
        :is="dialogOpts.component"
        :type="dialogOpts.type"
        :pass-data="dialogOpts.passData"
        @submit="dialogSubmitHandle"
        @add-charge-submit="dialogSubmitHandle"
      ></component>
    </a-modal>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import ShowInvoice from "../showInvoice/index.vue";
import ModifyRemark from "../modifyRemark/index.vue";
import AddChargeFee from "../addChargeFee/index.vue";
import RejectReason from "../rejectReason/index.vue";
import AdditionalCharge from "@/views/waybillManagement/businessWaybill/waybillQuotation/components/addChargeFee/index.vue";
export default {
  components: {
    ShowInvoice,
    ModifyRemark,
    AddChargeFee,
    RejectReason,
    AdditionalCharge
  }
};
</script>
<script lang="ts" setup>
import dayjs from "dayjs";
import CommonHook from "@/hook/commonHook";
import ModalHook from "@/hook/modalHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { formItemColumn } from "./data";
import { toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: SingleOrderApproval.ListRows;
    type: number; // 1 详情  2审批
    searchData: () => SingleOrderApproval.SearchParams;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
  (e: "reject"): void;
}>();
const { visible, passData, type, searchData } = toRefs(props);
const { getLabelByDict } = CommonHook();
const { formState, loading, dialogOpts, drawerOpts, init, search } = InitHook({ emit, searchData });
const { showInvoiceHandle, modifyInnerRemarkHandle, addChargeHandle, dialogSubmitHandle, rejectHandle, resolveHandle, modifyRemarkHandle, deleteChargeCostHandle, editChargeHandle } = OperationHook({
  drawerOpts,
  dialogOpts,
  passData,
  formState,
  init,
  emit,
  loading,
  search
});
const { drawerSubmitHandle } = ModalHook({
  dialogOpts,
  drawerOpts,
  callBack: () => {
    init(passData.value.id);
  }
});
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init(passData.value.id);
      search.value = searchData.value();
    }
  }
);
init(passData.value.id);
</script>
<style lang="stylus" scoped>
.details{
    padding-bottom: 60px;
    .title{
        font-weight: 600;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        .refuse-info{
          display: flex;
          color:red;
          >span:nth-child(1){
            margin-right: 16px;
          }
          >span:nth-child(2){
            display: inline-block;
            width: 240px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
    }
    .base-info{
      background-color: #fff;
      padding: 12px;
      border-radius: 8px;
    }
    .unit-price-update{
      background-color: #fff;
      padding: 12px;
      margin-top: 24px;
      border-radius: 8px;
    }
    .additional-charge{
      background-color: #fff;
      padding: 12px;
      margin-top: 24px;
      border-radius: 8px;
    }
    .total-quotation{
      background-color: #fff;
      padding: 12px;
      margin-top: 24px;
      border-radius: 8px;
      >.quotation-item{
        font-weight: 600;
        margin-bottom: 12px;
      }
    }
    .operation-btn{
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      padding: 12px;
      width: 100%;
      font-weight: 600;
      text-align: center;
      z-index: 999;
    }
    .emphasis-item {
        color: #fe8100;
        > :deep(.ant-form-item-label){
            >label{
                color: #fe8100;
            }
        }
    }
    .total-quotation-footer{
        padding-top: 12px;
        font-weight: 600;
        text-align: right;
    }
}
</style>
